<template>
  <div class="SAProblemDdfin-content">
    <div class="leftcontent">
      <div class="sim-topiconcard" v-if="showParamSet" @click="ParamSet">
        <i class="fas fa-file-signature"></i>
        <p>参数配置</p>
      </div>
      <div class="sim-topiconcard SAProblemDdfinIcon" v-if="!showParamSet">
        <i class="fas fa-file-signature"></i>
        <p>参数配置</p>
      </div>
      <div class="sim-topiconcard" @click="modelDrive" v-if="showModelDriver">
        <i class="fas fa-scroll"></i>
        <p>模型驱动</p>
      </div>
      <div class="sim-topiconcard SAProblemDdfinIcon" v-if="!showModelDriver">
        <i class="fas fa-scroll"></i>
        <p>模型驱动</p>
      </div>
    </div>
    <div class="rightcontent">
      <div class="paramsSet" v-if="!showParamSet">
        <div class="paramsformm">
          <div class="title">
            <i class="fas fa-edit"></i>
            <p>添加参数</p>
          </div>
          <div class="input-item">
            <!-- <span>参数名称</span> -->
            <p>参数名称:</p>
            <el-input
              placeholder="请输入内容"
              v-model="name"
              clearable
              class="input-box"
            ></el-input>
          </div>
          <div class="input-item">
            <p>参数最小值:</p>
            <el-input
              placeholder="请输入内容"
              v-model="min"
              type="number"
              clearable
              class="input-box"
            ></el-input>
          </div>
          <div class="input-item">
            <p>参数最大值:</p>
            <el-input
              placeholder="请输入内容"
              v-model="max"
              clearable
              class="input-box"
            ></el-input>
          </div>
          <div class="input-item">
            <p>参数描述:</p>
            <el-input
              placeholder="请输入内容"
              v-model="des"
              clearable
              class="input-box"
            ></el-input>
          </div>
          <div class="btn-group">
            <el-button class="sa-btn" size="medium" @click="addParam">
              添加
            </el-button>
            <el-button class="sa-btn" size="medium" @click="clear">
              重置
            </el-button>
          </div>
        </div>
        <div class="table-box">
          <div class="title">
            <i class="fas fa-table"></i>
            <p>模型参数</p>
          </div>
          <el-table
            :data="tableData"
            @cell-dblclick="celledit"
            max-height="180"
          >
            <el-table-column prop="name" label="参数" width="95" edit="false">
              <template slot-scope="scope">
                <el-input
                  v-if="scope.row.name.edit"
                  ref="name"
                  v-model="scope.row.name.value"
                  style="width: 100%"
                  @blur="scope.row.name.edit = false"
                >
                </el-input>
                <span v-else>{{ scope.row.name.value }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="min" width="100" label="最小值">
              <template slot-scope="scope">
                <el-input
                  v-if="scope.row.min.edit"
                  ref="min"
                  v-model="scope.row.min.value"
                  style="width: 100%"
                  @blur="scope.row.min.edit = false"
                >
                </el-input>
                <span v-else>{{ scope.row.min.value }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="max" width="100" label="最大值">
              <template slot-scope="scope">
                <el-input
                  v-if="scope.row.max.edit"
                  ref="max"
                  v-model="scope.row.max.value"
                  style="width: 100%"
                  @blur="scope.row.max.edit = false"
                >
                </el-input>
                <span v-else>{{ scope.row.max.value }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="des" width="200" label="参数描述">
              <template slot-scope="scope">
                <el-input
                  v-if="scope.row.des.edit"
                  ref="des"
                  v-model="scope.row.des.value"
                  style="width: 100%"
                  @blur="scope.row.des.edit = false"
                >
                </el-input>
                <span v-else>{{ scope.row.des.value }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="operation" label="操作" width="80">
              <template slot-scope="scope">
                <el-button
                  @click.native.prevent="deleteRow(scope.$index, tableData)"
                  type="text"
                  size="small"
                >
                  移除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <div class="btn-group">
            <el-button class="sa-btn" size="medium" @click="saveParamFile">
              存储为参数文件
            </el-button>
          </div>
        </div>
      </div>
      <div class="modelDriverUpload" v-if="!showModelDriver">
        <el-upload
          class="upload-demo"
          drag
          action="https://jsonplaceholder.typicode.com/posts/"
          multiple
        >
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          <!-- <div class="el-upload__tip" slot="tip">
            只能上传jpg/png文件，且不超过500kb
          </div> -->
        </el-upload>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      tableData: [],
      name: "",
      min: "",
      max: "",
      des: "",
      edit: "",
      showParamSet: false,
      showModelDriver: true,
    };
  },

  methods: {
    addParam() {
      if (this.name != "" && this.min != "" && this.max != "") {
        this.tableData.push({
          name: { value: this.name, edit: false },
          min: { value: this.min, edit: false },
          max: { value: this.max, edit: false },
          des: { value: this.des, edit: false },
          edit: false,
        });
      }
    },
    clear() {
      this.name = "";
      this.min = "";
      this.max = "";
      this.des = "";
    },
    ParamSet() {
      this.showModelDriver = true;
      this.showParamSet = false;
    },
    modelDrive() {
      this.showParamSet = true;
      this.showModelDriver = false;
    },
    handleEdit(index, row) {
      row.edit = true;
    },
    deleteRow(index, rows) {
      rows.splice(index, 1);
    },
    celledit(row, column, cell, event) {
      const _this = this;
      if (row[column.property]) {
        row[column.property].edit = true;
        setTimeout(() => {
          console.log(column.property);
          _this.$refs[column.property].focus();
        }, 20);
      }
    },
    saveParamFile() {
      const _this = this;
      let paramTable = [];

      this.tableData.forEach((element) => {
        paramTable.push({
          name: element.name.value,
          min: element.min.value,
          max: element.max.value,
        });
      });

      let postData = {
        value: paramTable,
        type: "param",
      };
      axios
        .post("http://localhost:8181/saveParamRangFile", postData)
        .then((resp) => {
          if (resp.data === "ok") {
            let url = "http://localhost:8181/ParamsRang.txt";
            let fileName = "ParamsRang";
            fetch(url, {
              headers: new Headers({
                Origin: location.origin,
              }),
              mode: "cors",
            })
              .then((response) => response.blob())
              .then((blob) => {
                let blobUrl = window.URL.createObjectURL(blob);
                const a = document.createElement("a");
                a.download = fileName;
                a.href = blobUrl;
                document.body.appendChild(a);
                a.click();
                a.remove();
              })
              .catch((e) => console.error(e));
          }
        });
    },
  },
};
</script>

<style>
.SAProblemDdfin-content {
  width: fit-content;
  display: flex;
  flex-direction: row;
  height: fit-content;
  /* height: 600px; */
}

.SAProblemDdfin-content .leftcontent {
  width: 80px;

  padding-top: 20px;
  padding-left: 5px;
  padding-right: 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* background-color: #f7f8f9; */
}

.SAProblemDdfin-content .leftcontent .sim-topiconcard {
  margin-bottom: 10px;
}

.SAProblemDdfin-content .leftcontent .SAProblemDdfinIcon i {
  color: rgb(20, 121, 215);
}
.SAProblemDdfin-content .leftcontent .SAProblemDdfinIcon p {
  color: rgb(20, 121, 215);
}
.SAProblemDdfin-content .leftcontent .SAProblemDdfinIcon:hover {
  background-color: rgb(20, 121, 215);
}
.SAProblemDdfin-content .leftcontent .SAProblemDdfinIcon:hover i {
  color: white;
}
.SAProblemDdfin-content .leftcontent .SAProblemDdfinIcon:hover p {
  color: white;
}
.SAProblemDdfin-content .rightcontent {
  height: 100%;
  width: 590px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-left: 10px;
  padding-right: 10px;
}
.SAProblemDdfin-content .rightcontent .paramsSet {
  height: fit-content;
  width: fit-content;
}
.SAProblemDdfin-content .rightcontent .modelDriverUpload {
  box-sizing: border-box;
  height: fit-content;
  width: 100%;

  padding-top: 20px;
  padding-bottom: 15px;
  padding-right: 15px;
}
.SAProblemDdfin-content .rightcontent .el-upload {
  width: 100%;
}
.SAProblemDdfin-content .rightcontent .el-upload-dragger {
  width: 100%;
}
.SAProblemDdfin-content .rightcontent .title {
  font-size: 16px;
  /* background: #000; */
  padding: 5px 10px;
  color: rgb(76, 118, 199);
  background-color: rgb(237, 239, 239);
  display: flex;
  flex-direction: row;
  align-items: center;
  position: absolute;
  left: 5px;
  top: -14px;
}
.SAProblemDdfin-content .rightcontent .title i {
  margin-right: 5px;
}
.SAProblemDdfin-content .rightcontent .paramsformm {
  height: fit-content;
  width: 100%;
  /* background-color: white; */
  border: 1px solid rgba(20, 121, 215);
  border-radius: 4px;
  margin-bottom: 20px;
  margin-top: 20px;
  position: relative;
  display: flex;
  flex-direction: column;
  padding-top: 26px;
}
.SAProblemDdfin-content .rightcontent .paramsformm .input-item {
  /* background-color: red; */
  width: 520px;
  height: fit-content;
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-left: 16px;
  margin-bottom: 10px;
}
.SAProblemDdfin-content .rightcontent .paramsformm .input-item p {
  margin-right: 20px;
  width: 100px;
  text-align: right;
  /* font-weight: bold; */
}

.SAProblemDdfin-content
  .rightcontent
  .paramsformm
  .input-item
  .el-input__inner {
  height: 36px;
  line-height: 36px;
  /* font-weight: bold; */
}

.SAProblemDdfin-content .rightcontent .btn-group {
  /* background-color: red; */
  width: 520px;
  height: fit-content;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  margin-top: 10px;
  margin-left: 16px;
  margin-bottom: 10px;
}
.SAProblemDdfin-content .rightcontent .btn-group .sa-btn {
  background-color: rgb(20, 121, 215);
  color: white;
}
.SAProblemDdfin-content .rightcontent .table-box {
  height: fit-content;
  width: 100%;
  /* background-color: white; */
  border: 1px solid rgba(20, 121, 215);
  border-radius: 4px;
  margin-bottom: 20px;
  position: relative;
  display: flex;
  flex-direction: column;
  padding-top: 26px;
  box-sizing: border-box;
  padding-left: 10px;
  padding-right: 10px;
  padding-bottom: 10px;
}
.SAProblemDdfin-content .table-box .el-table {
  height: 200px;
  border: 1px solid rgb(193, 193, 193);
  background-color: rgb(237, 239, 239);
  margin-bottom: 5px;
}
.SAProblemDdfin-content .table-box .gutter {
  background-color: rgb(237, 239, 239);
  border-bottom: 1px solid rgb(193, 193, 193);
}
.SAProblemDdfin-content .table-box .el-table th {
  background-color: rgb(237, 239, 239);
  border-color: rgb(193, 193, 193);
}
.SAProblemDdfin-content .table-box .el-table td {
  padding: 0px;
  height: 30px;
  background-color: rgb(237, 239, 239);
  border-color: rgb(193, 193, 193);
}
.SAProblemDdfin-content .table-box .el-table__body .el-input__inner {
  height: 25px;
}
.SAProblemDdfin-content .rightcontent .table-box .btn-group {
  margin-top: 10px;
  margin-bottom: 0px;
}
</style>